<template>
    <div id="Home">
        <nav>
            <img src="../assets/img/logo.png" alt="">
            <span>|</span>
            <span>济南教育地图</span>
        </nav>
        <div class="content">
            <div class="left-nav">
                <div class="search-content">
                    <div class="search-box">
                        <input type="text" placeholder="请输入学校名称" v-model="schoolParams.title">
                        <div>
                            <div class="icon-bg" @click="getLeftSchool">
                                <img src="../assets/img/sousuo.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="select-box">
                        <div>筛选</div>
                        <div>
                            <div
                                    v-for="(item, index) of selectBtn"
                                    :key="index" :class="{select: item.select}"
                                    @click="changeSelect(item)"
                            >{{item.name}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-list">
                    <div class="info-box" v-show="!navContent">
                        <div class="nav-title">教育资讯</div>
                        <div class="list-box">
                            <div class="list-item"
                                 v-for="(item, index) of leftNews"
                                 :key="index"
                                 @click="toDetails(item)">
                                <div class="item-top" v-if="item.thumb">
                                    <div class="banner-box">
                                        <img :src="item.thumb && item.thumb" alt="">
                                    </div>
                                    <div class="item-content">
                                        <div>{{item.title}}</div>
                                        <div>{{item.updatetime}}</div>
                                    </div>
                                </div>
                                <div class="item-bottom" v-if="!item.thumb">
                                    <div>{{item.title}}</div>
                                    <div>{{item.updatetime}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="more-btn" @click="toInfo">查看更多资讯</div>
                    </div>
                    <div class="school-box">
                        <div :class="{'school-item': true, 'school-item-focus': schoolItemIndex === index}"
                             v-for="(school, index) of highSchoolList"
                             :key="index"
                             @click="toSchoolInfo(school, index)"
                             v-show="navContent">
                            <div>{{school.title}}</div>
                            <span>〉</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="map-content">
                <div id="map" v-show="content === '地图'"></div>
                <div class="info" v-show="content === '资讯'">
                    <div class="info-title">{{infoTitle}}资讯</div>
                    <div class="info-box">
                        <div class="info-item" v-for="(item, index) of contentNews" :key="index"
                             @click="toDetails(item)">
                            <div class="info-item-content">
                                <div>
                                    <img :src="item.thumb &&item.thumb" alt="">
                                </div>
                                <div>
                                    {{item.title}}
                                </div>
                                <div>{{item.updatetime}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination-box">
                        <Pagination
                                background
                                layout="prev, pager, next"
                                @current-change="paginationChange"
                                :page-size="newPageSize"
                                :total="newTotal">
                        </Pagination>
                    </div>
                </div>
                <div class="map-select">
                    <div></div>
                    <!--山东师外国语学校-->
                    <div>
                        <div v-for="(item, index) of mapSelect" :key="index"
                             :class="item.select ? 'select-focus' : null"
                             @click="changeMapSelect(item)"
                        >{{item.name}}
                        </div>
                    </div>
                </div>
                <div class="school-info" v-show="content === '地图' && schoolInfo">
                    <h2>学校简介</h2>
                    <div class="info-banner">
                        <img :src="schoolDetails.school && schoolDetails.school.thumb"
                             @click="toOutLink(schoolDetails.school)" alt="">
                    </div>
                    <div class="info-introduce">{{schoolDetails.school && schoolDetails.school.description}}</div>
                    <h2 v-show="this.schoolDetails.grade && this.schoolDetails.grade.length !== 0">往年录取分数线</h2>
                    <div id="fractional-line"
                         v-show="this.schoolDetails.grade && this.schoolDetails.grade.length !== 0"></div>
                    <h2 v-show="schoolDetails.zixun && schoolDetails.zixun.length !== 0">资讯</h2>
                    <div class="list-box" v-show="schoolDetails.zixun && schoolDetails.zixun.length !== 0">
                        <div class="list-item" v-for="(item, index) of schoolDetails.zixun" :key="index"
                             @click="toDetails(item)">
                            <div class="item-top" v-if="item.thumb">
                                <div class="banner-box">
                                    <img :src="item.thumb" alt="">
                                </div>
                                <div class="item-content">
                                    <div>{{item.title}}</div>
                                    <div>{{item.updatetime}}</div>
                                </div>
                            </div>
                            <div class="item-bottom" v-if="!item.thumb">
                                <div>{{item.title}}</div>
                                <div>{{item.updatetime}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="more-btn"
                         v-show="schoolDetails.zixun && schoolDetails.zixun.length !== 0"
                         @click="toInfo(schoolDetails.school.id, schoolDetails.school.title)">查看更多资讯
                    </div>
                    <div class="school-info-box" v-show="schoolDetails.vr">
                        <h2>VR校园</h2>
                        <div class="img-box">
                            <img :src="schoolDetails.vr && schoolDetails.vr.thumb" alt=""
                                 @click="toOutLink(schoolDetails.vr)">
                        </div>
                    </div>
                    <div class="school-info-box" v-show="schoolDetails.xzyy">
                        <h2>融媒视觉</h2>
                        <div class="img-box">
                            <img src="../assets/img/img3.png" alt="" @click="toOutLink(schoolDetails.xzyy)">
                        </div>
                    </div>
                    <div class="school-info-box" v-show="schoolDetails.xypic && schoolDetails.xypic.length !== 0">
                        <h2>多彩校园</h2>
                        <Carousel trigger="click" height="150px">
                            <CarouselItem v-for="item in schoolDetails.xypic" :key="item">
                                <img :src="item.thumb" alt="" class="swiper-img">
                            </CarouselItem>
                        </Carousel>
                    </div>
                    <div class="school-info-box">
                        <h2>了解更多</h2>
                        <div class="code">
                            <img :src="schoolDetails.school && schoolDetails.school.erweima" alt="">
                            <div>扫描左侧二维码了解该学校更多详情</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Dialog
                :close-on-click-modal="false"
                :visible.sync="dialogVisible">
            <div class="details">
                <h1>{{newDetails.title}}</h1>
                <div>{{newDetails.description}}</div>
                <div class="details-content" v-html="newDetails.content"></div>
            </div>
        </Dialog>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import axios from 'axios'
    import {options} from '../assets/js/fractional-options'
    import * as qs from 'query-string'
    import moment from 'moment'
    import {Pagination, Dialog, Carousel, CarouselItem} from 'element-ui'

    export default {
        name: "Home",
        components: {
            Pagination,
            Dialog,
            Carousel,
            CarouselItem
        },
        data() {
            return {
                dialogVisible: false,
                // nav内容显示内容 true 学校 false 为资讯
                navContent: false,
                // 显示地图还是资讯
                content: '地图',
                selectBtn: [
                    {name: '普通高中', select: false, stype: 1},
                    {name: '职业学校', select: false, stype: 2}
                ],
                mapSelect: [
                    {name: '地图', select: true},
                    {name: '资讯', select: false}
                ],
                highSchoolList: [],
                testInfo: [
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: require('../assets/img/img1.png')
                    },
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: require('../assets/img/img1.png')
                    },
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: require('../assets/img/img1.png')
                    },
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: ''
                    },
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: require('../assets/img/img1.png')
                    },
                    {
                        content: '济南外国语学校，是山东省唯一在教育部备案的外国语学校',
                        time: '舜网·12小时',
                        banner: require('../assets/img/img1.png')
                    }
                ],
                schoolList: [
                    {name: '山东省实验中学', center: [117.010947, 36.664859]},
                    {name: '济南山师附中', center: [117.047495, 36.664543]},
                    {name: '济南三中', center: [117.005964, 36.59362]}
                ],
                newParams: {
                    // 资讯604
                    catid: 604,
                    num: 20,
                    page: 1,
                    thumb: 0,
                    // 学校id
                    school: '',
                    // 学校名称
                    // title: ''
                },
                schoolParams: {
                    catid: 603,
                    stype: 1,
                    title: '',
                },
                schoolInfo: false,
                leftNews: [],
                contentNews: [],
                // 新闻总页数
                newTotal: 0,
                // 一页多少条
                newPageSize: 20,
                schoolDetails: {},
                // 新闻详情
                newDetails: {},
                // 资讯为全部的还是为单独学校的
                infoTitle: '',
                schoolItemIndex: '',
                markerList: []
            }
        },
        methods: {
            changeSelect(item) {
                this.selectBtn.map(btn => btn.select = false)
                item.select = true
                this.navContent = true
                this.schoolParams.stype = item.stype
                this.getLeftSchool()
            },
            changeMapSelect(item) {
                this.mapSelect.map(btn => btn.select = false)
                item.select = true
                this.content = item.name
            },
            /**
             * 初始化地图
             */
            initMap() {
                this.$nextTick(() => {
                    let map = new AMap.Map('map', {
                        center: [117.000923, 36.675807],
                        zoom: 11,
                        // resizeEnable: true
                    })
                    this.markerList = this.schoolList.map((item, index) => {
                        // console.log([parseInt(item.longitude), parseInt(item.latitude)])
                        item.center = [parseFloat(item.longitude), parseFloat(item.latitude)]
                        let circleMarker = new AMap.CircleMarker({
                            center: item.center,
                            radius: '10px',//3D视图下，CircleMarker半径不要超过64px
                            strokeColor: 'white',
                            strokeWeight: 2,
                            strokeOpacity: 0.8,
                            fillColor: 'rgba(209,72,23,1)',
                            fillOpacity: 0.8,
                            zIndex: 10,
                            bubble: true,
                            cursor: 'pointer',
                            clickable: true,
                            data: {...item, index}
                        })
                        circleMarker.setMap(map)
                        circleMarker.on('click', (e) => this.clickHandler(e, map));
                        return circleMarker
                    })
                    this.map = map
                })
            },
            /**
             * 初始化内容中的 分数线
             */
            initFractional() {
                let echart = echarts.init(document.getElementById('fractional-line'))
                options.xAxis.data = this.schoolDetails.grade.map(item => item.year)
                options.series[0].data = this.schoolDetails.grade.map(item => item.tzs)
                options.series[1].data = this.schoolDetails.grade.map(item => item.zbs)
                echart.setOption(options)
            },
            clickHandler(event, map) {
                // let e = event.target.data || event
                console.log(event.target ? event.target.Ce.data : event)
                let data = event.target ? event.target.Ce.data : event
                // 创建 infoWindow 实例
                let infoWindow = new AMap.InfoWindow({
                    content: `<div class="info-window">
                                <div>${data.title}</div>
                              </div>`
                })
                console.log(data)
                infoWindow.open(map, data.center || [data.longitude, data.latitude])
                // if(e.Ce.data.stype === '1') {
                //     this.changeSelect(this.selectBtn[0])
                // }else if(e.Ce.data.stype === '2') {
                //     this.changeSelect(this.selectBtn[1])
                // }
                // let listIndex = null
                // let data = this.highSchoolList.find((item, index) => {
                //     console.log(item.id)
                //     console.log(e.Ce.data.id)
                //     listIndex = index
                //     return item.id === e.Ce.data.id
                // })
                // console.log(data)
                // this.toSchoolInfo(data, listIndex)
            },
            /**
             * 打开详情
             */
            toDetails(item) {
                if (item.islink !== '0') {
                    window.open(item.url)
                } else {
                    axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=show&${qs.stringify({
                        id: item.id,
                        catid: 604
                    })}`).then(res => {
                        console.log(res)
                        this.newDetails = res.data.news_info
                        this.dialogVisible = true
                    })
                }
            },
            toInfo(id, title) {
                console.log(id)
                if (id && title) {
                    this.newParams.school = id
                    this.infoTitle = title
                    this.getContentNews(id)
                }
                this.changeMapSelect(this.mapSelect[1])
            },
            /**
             * 跳转学校的详情
             */
            toSchoolInfo(school, index) {
                this.schoolItemIndex = index
                // this.map.emit('click',{
                //     lnglat : [parseFloat(school.longitude), parseFloat(school.latitude)]
                // })
                console.log(school)
                this.clickHandler(school, this.map)
                this.map.setZoomAndCenter(this.map.getZoom(), [parseFloat(school.longitude), parseFloat(school.latitude)]); //同时设置地图层级与中心点
                // let infoWindow = new AMap.InfoWindow({
                //     content: `<div class="info-window">
                //                 <div>${school.title}</div>
                //               </div>`
                // })
                // infoWindow.open(this.map, school.center)
                this.schoolInfo = true
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=eduinfo&${qs.stringify({
                    id: school.id
                })}`).then(res => {
                    res.data.data.zixun.map(item => {
                        item.updatetime = moment.unix(+item.updatetime).format('YYYY-MM-DD')
                    })
                    console.log(res)
                    this.schoolDetails = res.data.data
                    this.initFractional()
                })
            },
            // getLeftNews() {
            //     axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify({...this.newParams})}`, this.newParams).then(res => {
            //         console.log(res)
            //     })
            // },
            getContentNews(id) {
                if (!this.newParams.school) {
                    delete this.newParams.school
                }
                console.log(this.newParams)
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify(this.newParams)}`).then(res => {
                    this.contentNews = res.data.data.news.map(item => {
                        item.updatetime = moment.unix(+item.updatetime).format('YYYY-MM-DD')
                        return item
                    })
                    // 总条数 总页数 * 默认条数
                    this.newTotal = res.data.data.pageCount * this.newPageSize
                    if (this.newParams.page === 1 && !id) {
                        this.leftNews = JSON.parse(JSON.stringify(this.contentNews))
                    }
                })
            },
            getLeftSchool() {
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify(this.schoolParams)}`, this.newParams).then(res => {
                    console.log(res)
                    this.highSchoolList = res.data.data.news.map((item, index) => {
                        return {...item, index}
                    })
                })
            },
            getAllSchool() {
                axios.post(`http://zhuanti.e23.cn/index.php?m=api&c=content&a=newsList&${qs.stringify({catid: 603})}`, this.newParams).then(res => {
                    console.log(res)
                    this.schoolList = res.data.data.news
                    // this.highSchoolList = JSON.parse(JSON.stringify(res.data.data.news))
                    this.initMap()
                })
            },
            /**
             * 新闻页码切换
             */
            paginationChange(page) {
                this.newParams.page = page
                this.getContentNews()
            },
            /**
             * 跳转外连接
             */
            toOutLink(item) {
                if (item.islink !== '0') {
                    window.open(item.url)
                }
            }
        },
        mounted() {
            // this.initMap()
            this.getContentNews()
            this.getAllSchool()
        }
    }
</script>

<style scoped lang="less">
    #Home {
        nav {
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            background: white;
            border-bottom: 1px solid #DDD;
            box-sizing: border-box;

            > img {
                width: 26px;
                margin: 0 10px 0 23px;
            }

            > span:nth-of-type(1) {
                color: #999;
            }

            > span:nth-of-type(2) {
                margin-left: 10px;
                color: #333333;
                font-size: 20px;
                font-weight: bold;
            }
        }

        .content {
            width: 100%;
            height: calc(100vh - 70px);
            display: flex;

            .left-nav {
                width: 320px;
                height: 100%;
                background: white;
                padding-top: 20px;
                box-sizing: border-box;

                .search-content {
                    height: 120px;

                    .search-box {
                        border: 1px solid #DDD;
                        width: 260px;
                        height: 42px;
                        margin: 0 auto 10px;
                        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                        border-radius: 6px;
                        display: flex;
                        align-items: center;

                        > input {
                            height: 60%;
                            width: 70%;
                            border: none;
                            margin-left: 20px;
                        }

                        > div {
                            width: 20%;
                            height: 80%;
                            border-left: 1px solid #ddd;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .icon-bg {
                                background-color: #F5F5F5;
                                border-radius: 16px;
                                height: 28px;
                                width: 28px;
                                padding: 7px;
                                box-sizing: border-box;
                                cursor: pointer;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }

                    .select-box {
                        margin: 0 auto;
                        width: 260px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        > div:nth-of-type(2) {
                            display: flex;

                            > div {
                                margin-left: 10px;
                                width: 88px;
                                height: 32px;
                                border: 1px solid rgba(242, 242, 242, 1);
                                opacity: 1;
                                border-radius: 16px;
                                text-align: center;
                                line-height: 32px;
                                cursor: pointer;
                            }

                            .select {
                                background: #EEEEEE;
                            }
                        }

                    }
                }

                .nav-list {
                    box-sizing: border-box;
                    height: calc(100% - 120px);
                    overflow: auto;
                    /*修改滚动条样式*/

                    .nav-title {
                        font-size: 16px;
                        font-weight: bold;
                        width: 260px;
                        margin: 0 auto;
                    }

                    .school-box {
                        .school-item {
                            width: 260px;
                            margin: 10px auto;
                            display: flex;
                            justify-content: space-between;
                            background: #FFF;
                            border: 1px solid rgba(0, 0, 0, 0.05);
                            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                            border-radius: 6px;
                            font-size: 14px;
                            line-height: 20px;
                            padding: 12px 16px;
                            cursor: pointer;
                            user-select: none;
                            color: rgba(51, 51, 51, 1);
                            font-weight: 600;
                            box-sizing: border-box;

                            &:hover {
                                background: linear-gradient(98.7deg, rgba(255, 255, 255, 0.3) 0%, rgba(235, 235, 235, 0.3) 100%), radial-gradient(50% 351.19% at 50% 50%, rgba(0, 128, 157, 0.016) 0%, rgba(0, 128, 157, 0.02) 100%), #FFFFFF;
                                box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
                                border: 1px solid #00809D;
                                color: #00809D;
                            }

                            > span {
                                color: #999999;
                            }
                        }

                        .school-item-focus {
                            background: linear-gradient(98.7deg, rgba(255, 255, 255, 0.3) 0%, rgba(235, 235, 235, 0.3) 100%), radial-gradient(50% 351.19% at 50% 50%, rgba(0, 128, 157, 0.016) 0%, rgba(0, 128, 157, 0.02) 100%), #FFFFFF;
                            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
                            border: 1px solid #00809D;
                            color: #00809D;
                        }
                    }
                }
            }

            .map-content {
                width: calc(100% - 320px);
                height: 100%;
                position: relative;

                .map-select {
                    background: rgba(247, 247, 247, 0.8);
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 57px;
                    z-index: 300;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ddd;
                    padding: 0 24px;

                    > div:nth-of-type(2) {
                        display: flex;
                        color: #333333;
                        font-weight: bold;

                        > div {
                            padding: 0 10px;
                            height: 58px;
                            line-height: 58px;
                            cursor: pointer;
                            border-bottom: 2px solid transparent;
                            box-sizing: border-box;
                        }

                        .select-focus {
                            border-bottom: 2px solid rgb(1, 128, 157, 1);
                            transition: all .5s;
                        }
                    }
                }

                #map {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    top: 0;
                    left: 0;
                }

                .info {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    top: 0;
                    left: 0;
                    background: white;
                    box-sizing: border-box;
                    padding-top: 100px;
                    overflow: scroll;

                    .info-title {
                        font-weight: bold;
                        font-size: 16px;
                        margin-bottom: 12px;
                    }

                    .info-box {
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        flex-wrap: wrap;

                        .info-item {
                            width: 12.5%;
                            min-width: 220px;
                            height: 200px;
                            display: flex;
                            justify-content: center;
                            margin-bottom: 20px;

                            .info-item-content {
                                width: 200px;
                                height: 100%;
                                border: 1px solid rgba(0, 0, 0, 0.05);
                                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                                box-sizing: border-box;
                                cursor: pointer;

                                > div:nth-of-type(1) {
                                    width: 100%;
                                    height: 90px;

                                    > img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                > div:nth-of-type(2) {
                                    margin: 5px auto 10px;
                                    font-size: 13px;
                                    width: 85%;
                                    height: 53px;
                                    line-height: 18px;
                                }

                                > div:nth-of-type(3) {
                                    margin: 0 auto;
                                    font-size: 13px;
                                    width: 85%;
                                    line-height: 18px;
                                    color: rgba(118, 118, 118, 1);
                                }
                            }
                        }
                    }
                }

                .school-info {
                    position: absolute;
                    background: white;
                    width: 320px;
                    height: calc(90% - 30px);
                    left: 24px;
                    top: 50%;
                    transform: translateY(-50%);
                    overflow: auto;
                    padding-top: 10px;

                    > h2 {
                        width: 85%;
                        margin: 10px auto;
                        color: #333333;
                    }

                    .info-banner {
                        width: 85%;
                        margin: 10px auto;

                        > img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .info-introduce {
                        width: 85%;
                        margin: 10px auto 20px;
                    }

                    #fractional-line {
                        width: 270px;
                        height: 160px;
                        margin: 10px auto;
                    }

                    .school-info-box {
                        width: 85%;
                        margin: 10px auto;

                        > div:nth-of-type(1) {
                            margin-top: 20px;
                            width: 100%;
                        }

                        .img-box {
                            width: 100%;

                            > img {
                                width: 100%;
                            }
                        }
                    }

                    .code {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 96px;
                            height: 96px;
                            margin-right: 10px;
                        }

                        > div {
                            width: 125px;
                            height: 35px;
                            line-height: 17px;
                            color: rgba(51, 51, 51, 1);
                        }
                    }
                }
            }
        }

        /**
        导航栏资讯列表样式
         */

        .list-item {
            margin: 10px auto;
            width: 250px;

            .item-top {
                width: 100%;
                display: flex;
                padding: 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                border-radius: 6px;
                box-sizing: border-box;
                cursor: pointer;

                .banner-box {
                    width: 78px;
                    height: 76px;
                    overflow: hidden;

                    > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .item-content {
                    height: 76px;
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    > div:nth-of-type(1) {
                        width: 149px;
                        height: 58px;
                        font-size: 13px;
                        color: rgba(51, 51, 51, 1);
                    }

                    > div:nth-of-type(2) {
                        /*width: 65px;*/
                        height: 16px;
                        font-size: 12px;
                        color: rgba(118, 118, 118, 1);
                    }
                }
            }

            .item-bottom {
                margin-top: 10px;
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
                border-radius: 6px;
                box-sizing: border-box;
                cursor: pointer;

                > div:nth-of-type(1) {
                    /*width: 244px;*/
                    height: 58px;
                    font-size: 13px;
                }

                > div:nth-of-type(2) {
                    height: 16px;
                    font-size: 12px;
                }
            }
        }

        /**
        资讯更多按钮
         */

        .more-btn {
            width: 170px;
            height: 40px;
            margin: 20px auto;
            text-align: center;
            line-height: 40px;
            color: rgba(118, 118, 118, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            border-radius: 20px;
            cursor: pointer;
        }

        .pagination-box {
            margin: 20px auto;
            display: flex;
            justify-content: center;
        }

        .details {
            margin: 0 auto;
            width: 80%;
            height: 60vh;

            > h1 {
                font-size: 22px;
                color: black;
                height: 60px;
                line-height: 30px;
            }

            > div:nth-of-type(1) {
                margin: 15px auto;
            }

            /*min-width: 1000px;*/
            /*min-height: 600px;*/
        }
    }

    .swiper-img {
        width: 100%;
    }
</style>